<template>
	<view class="page">
		<view class="inpt-unit">
			<view class="inpt-key">
				门店名称
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入门店名称" class="inpt" v-model="name" />
			</view>
		</view>
		<view class="avatar-unit ">
			<view class="inner align-center" @click="uploadImg">
				<view class="avatar-key">
					门店logo
				</view>	
				<image :src="image" mode="aspectFill" class="img" v-if="image"></image>
				<image src="/static/arrow-br.png" mode="aspectFill" class="ic"></image>				
			</view>
		</view>
		<view class="select-unit">
			<view class="select-key">
				营业时间
			</view>	
			<view class="select-wrap flex-row">
				<picker mode="time" @change="onStart">
					<view class="select-val">
						<text class="val " :class="{'placeholder' : !starttime }">{{starttime ? starttime : '开始营业时间'}}</text>
						<image src="/static/arrow-br.png" mode="aspectFill" class="ic"></image>
					</view>		
				</picker>
				<picker mode="time" @change="onEnd">
					<view class="select-val" style="margin-left:150rpx;">
						<text class="val" :class="{'placeholder' : !endtime }">{{endtime ? endtime : '结束营业时间'}}</text>
						<image src="/static/arrow-br.png" mode="aspectFill" class="ic"></image>
					</view>
				</picker>
			</view>
		</view>
		<view class="avatar-unit " style="margin-bottom: 300rpx;">
			<view class="inner align-center">
				<view class="avatar-key">
					门店是否营业
				</view>	
				<switch :checked="status === 1 ? true : false" @change="onSwitch" color="#256ae5" style="transform: scale(0.7);" />
				<!-- 
				<image src="/static/door-checked.png" mode="aspectFill" class="switch" v-if="true"></image>		
				<image src="/static/door-checkun.png" mode="aspectFill" class="switch" v-else></image>		
				 -->
			</view>

		</view>
	</view>
	<submit-btn @submit="submit" ref="submitRef">
		<template v-slot:btns="{isSubmitted}">
			<view class="p-btn" :class="{'disabled':isSubmitted}">
				{{id ? '编辑门店' : '新建门店'}}
			</view>
		</template>
	</submit-btn>
	
</template>		
<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  // watchEffect,
} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const doorHandle = defineComponent({
	components:{
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
			id:'', //编辑时有值
			
			name:'',
			image:'',
			starttime:'',
			endtime:'',
			status: 1, //1营业，0暂停
			
			// start_time:'', //展示
			// end_time:'',
		})
		// watchEffect(()=>{
		// })
		onLoad(e => {
			
			if(e.id){
				data.id = e.id;
				getInfo();
			}
			
		});
		const getInfo = async ()=>{
			const res = await uni.$request('store.info',{id: data.id});
			let info = res.data;
			Object.keys(info).forEach(i=>{
				if(data.hasOwnProperty(i)){
					data[i] = info[i]
				}
			})
		}
		
		
		
		const uploadImg = async ()=>{
			let img = await uni.$tools.uploadImg();
			data.image = img;
		}
		const onStart = (e)=>{
			data.starttime = e.detail.value;
		}
		const onEnd = (e)=>{
			data.endtime = e.detail.value;
		}
		const onSwitch = (e)=>{
			let isOpen = e.detail.value;
			data.status = isOpen ? 1 : 0;
		}


		
		
		const submitRef = ref();
		const submit= async ()=>{
			if(! uni.$tools.match( data.name,'nonull',"请输入门店名称")){
			    return;
			}
			if(! uni.$tools.match( data.image,'nonull',"请上传门店LOGO")){
			    return;
			}
			if(! uni.$tools.match( data.starttime,'nonull',"请选择开始时间")){
			    return;
			}
			if(! uni.$tools.match( data.endtime,'nonull',"请选择结束时间")){
			    return;
			}
			
			const sendData:any={
				name: data.name,
				image: data.image,
				starttime: data.starttime,
				endtime: data.endtime,
				status: data.status, //1营业，0暂停
			}
			if(data.id){
				sendData.id = data.id;
			}
			const url = data.id ? 'store.edit' : 'store.add';
			let res = await uni.$request(url,sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.goBack();
			},800)
		}
		return {
			...toRefs(data),
			uploadImg,
			onStart,
			onEnd,
			onSwitch,
			
			submitRef,
			submit,
			
		};
	}
})
export default doorHandle;
</script>


<style lang="scss">
	page{
		background-color: #fff;
	}
	.page{
		padding-top: 30rpx;
		padding-bottom: 40rpx;
	}
	.inpt-unit{
		padding: 0 30rpx;
		.inpt-key{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			
		}
		.inpt-val{
			border-bottom: 2rpx solid #eee;
			.inpt{
				font-size: 24rpx;
				color:#333;
				height: 60rpx;
				line-height: 60rpx;
				flex:1;
			}
			.mark{
				height: 60rpx;
				line-height: 60rpx;
				border-bottom: 2rpx solid #eee;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
	.avatar-unit{
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		.inner{
			height: 122rpx;
			border-bottom: 2rpx solid #eee;
		}
		.avatar-key{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-right: auto;
		}
		.img{
			width: 70rpx;
			height: 70rpx;
			border-radius: 70rpx;
			margin-right: 16rpx;
		}
		.ic{
			width: 20rpx;
			height: 20rpx;
		}
		.switch{
			width: 40rpx;
			height: 20rpx;
		}
	}
	.select-unit{
		padding: 0 30rpx;
		.select-key{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.select-wrap{
			border-bottom: 2rpx solid #eee;
		}
		.select-val{
			display: flex;
			align-items: center;
			height: 60rpx;
			.val{
				font-size: 24rpx;
				color:#333;
			}
			.ic{
				width:20rpx;
				height: 20rpx;
			}
		}
	}
	
	
	.p-btn{
		margin: 0 auto;
		width: 670rpx;
		height: 84rpx;
		background: #256ae5;
		border-radius: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		&.disabled{
			background-color: #eee;
		}
	}
</style>